/*
 * @Description: 离线接收按钮及弹窗
 * @Author: Rfan
 * @Date: 2022-04-29 10:32:41
 * @LastEditTime: 2022-04-29 13:58:56
 */

import { ReactElement, useMemo, useState } from 'react';
import { Button, Dropdown, Menu, Space } from 'antd';
import { DownOutlined } from '@ant-design/icons';
import CreateBatchDialog from './dialogs/CreateBatch';

const OfflineReceive = () => {
  // 导入excel弹窗显示标志
  const [excelVisible, setExcelVisible] = useState(false);

  /**
   * @description: 打开excel导入弹窗
   */
  const showExcelDialog = () => {
    setExcelVisible(true);
  };

  const menu: ReactElement = (
    <Menu>
      <Menu.Item key="excel">
        <Button
          type="text"
          onClick={() => {
            showExcelDialog();
          }}
        >
          目录导入EXCEL
        </Button>
      </Menu.Item>
      <Menu.Item key="original">原文包导入</Menu.Item>
      <Menu.Item key="achievement">成果导入</Menu.Item>
      <Menu.Item key="normal">普通格式包导入</Menu.Item>
      <Menu.Item key="sip">SIP包导入</Menu.Item>
    </Menu>
  );

  return (
    <div>
      <Dropdown overlay={menu} trigger={['click']}>
        <Button>
          <Space>
            离线接收
            <DownOutlined />
          </Space>
        </Button>
      </Dropdown>
      {useMemo(
        () => (
          <CreateBatchDialog
            visible={excelVisible}
            onClose={() => {
              setExcelVisible(false);
            }}
          />
        ),
        [excelVisible]
      )}
    </div>
  );
};

export default OfflineReceive;
